<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <th:block th:include="include :: header('信丰脐橙果农版')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: summernote-css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body class="white-bg">
<div class="outerSphere">
    <div class="head_content">
        <div class="head_content_left">
            <img src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/fc81a243-331b-428e-8666-c2a7248867d3.png">
            <div class="app_name">
                信丰脐橙果农版
            </div>
        </div>
        <div class="head_content_right open_app" >
            打开
        </div>
    </div>
    <div class="tittle" style="margin-top: 20px">
        [[${growTechVo.title}]]
    </div>
    <div style="width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: space-between">

        <div id="issueTime" class="time">
            [[${growTechVo.issueTimeString}]]
        </div>
        <div class="ydl">
           阅读量： [[${growTechVo.readCount}]]
        </div>
    </div>

    <div id="pnContent" class="centent">
        <div id="pnContentTwo" class="article__content   centent2">
            富文本内容
        </div>
        <div>
            <video id="myvideoUrl" controls="controls"  th:src="${growTechVo.videoUrl}"> ></video>
        </div>
    </div>
    <div class="shade-area">
        <div class="jiantou_zhanshi">
            <img id="zhanshiImg" src="http://hcgy-pro.oss-cn-hangzhou.aliyuncs.com/1c5ec11e-5e79-48dd-8540-91e6a59d532b.gif " >
        </div>
        <div class="open_app_but  open_app">
            打开APP阅读全文
        </div>
    </div>
</div>
<div class="List-tittle">
    <img src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/381b8aa6-85b0-4cc1-8322-001eacd1ecc5.png" >
    <span>热门推荐</span>
</div>
<div class="List"  th:each="growTechFor: ${list}">
    <div class="list_left">
        <div class="list_left_tittle">
            [[${growTechFor.title}]]
        </div>
        <div class="List_left_bottom">
            <div class="unfold_app open_app">打开APP</div>
            <div class="view_count">[[${growTechFor.readCount}]]次浏览</div>
        </div>
    </div>

    <img class="list_right"
         th:src="${growTechFor.mainImg}" id="courseImg">

</div>


<div class="bottom_img">
    <img class="open_app" src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/14c02454-4489-457c-a6d9-a357e8339019.png" >
</div>
<script type="text/javascript">
    $("#zhanshiImg").click(function() {
        $(".article__content").removeClass("centent2");
        $(".shade-area").addClass('selected');
    });
    // 跳转下载页
    $(".open_app").click(function(){
        //window.location.href="http://xfqc.sinonc.cn/orders/newFarmAppVersion/download"
        window.location.href="[[${shareNewFarmAppUrl}]]";
    });


</script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />

<th:block th:include="include :: select2-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />

<script th:inline="javascript">

    let shapeType = [[${growTechVo.shapeType}]];

    let content = [[${growTechVo.content}]];
    content = content.replace(/<img[^>]*>/gi, (match, capture)=> {
        return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%;display:block;"') // 替换style
    })

    if (shapeType=='Image'){
        $("#pnContentTwo").html(content);
        $("#pnContentTwo").show();
        $("#myvideoUrl").hide();
    }else {
        $("#pnContentTwo").hide();
        $("#myvideoUrl").show();
    }

</script>

<style type="text/css">
    .outerSphere {
        width: 100%;
        height: auto;
        padding: 15px 15px 0 15px;
    }

    .head_content {
        width: 100%;
        height: 44px;
        background: #FFFFFF;
        box-shadow: 0px 4px 4px 0px #F4F4F4;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .head_content_left {
        width: 70%;
        display: flex;
        flex-direction: row;
    }

    .head_content_left img {
        width: 34px;
        height: 34px;
    }

    .app_name {
        font-size: 14px;
        font-weight: 400;
        color: #313131;
        line-height: 44px;
        margin-left: 9px;
    }

    .head_content_right {
        width: 56px;
        height: 24px;
        background: #FF8900;
        border-radius: 12px;
        text-align: center;
        line-height: 24px;
        margin-top: 10px;
        color: #FFFFFF;
    }

    .tittle {
        width: 100%;
        color: #101010;
        font-size: 18px;
        line-height: 25px !important;
        padding-bottom: 8px;
        text-align: center;
    }

    .time {
        width: 50%;
        color: #101010;
        font-size: 18px;
        line-height: 25px !important;
        padding-bottom: 8px;
        text-align: left;
    }
    .ydl{
        width: 50%;
        color: #101010;
        font-size: 18px;
        line-height: 25px !important;
        padding-bottom: 8px;
        text-align: right;
    }
    .centent {
        width: 100%;
        height: 100%;

    }
    .article__content {
        width: 100%;
        height: 100%;
    }

    .centent2 {
        max-height: 750px;
        overflow: hidden;
    }
    .selected{
        display: none;
    }

    .shade-area {
        width: 100%;
        height: 108px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 1) 77%, rgba(255, 255, 255, 1) 100%);
        /* position: fixed;
        top: 836px; */
    }
    .jiantou_zhanshi{
        width: 100%;
        height: 62px;
        display: flex;
        justify-content: center;
    }
    #zhanshiImg{
        width: 24px;
        height: 40px;
        margin-top: 6px;
    }
    .open_app_but{
        width:342px;
        height:34px;
        background:#FF8900;
        border-radius:20px;
        margin: 0 auto;
        font-size:16px;
        font-weight:400;
        color:#FFFFFF;
        line-height:34px;
        text-align: center;
    }
    .List-tittle{
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 15px;
    }
    .List-tittle img{
        width: 26px;
        height: 26px;
    }
    .List-tittle span{
        line-height: 30px;
        margin-left: 8px;
    }
    .List{
        width: 100%;
        height: 90px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 15px;
    }
    .list_left{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }
    .list_left_tittle{
        height: 40px;
        font-size:14px;
        font-weight:400;
        color:#3A3A3A;
        line-height:20px;
        padding-right: 18px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-wrap: break-word;
        word-break: break-all;
    }
    .List_left_bottom{
        display: flex;
        flex-direction: row;
    }
    .unfold_app{
        width:56px;
        font-size:14px;
        font-weight:400;
        color:#FF8900;
        line-height:20px;
    }
    .view_count{
        width:76px;
        font-size:14px;
        font-weight:400;
        color:#959595;
        line-height:20px;
        margin-left: 14px;
    }
    .list_right{
        width:122px;
        height:70px;
        margin-top: 10px;
    }
    .bottom_img{
        width: 100%;
        height: 136px;
        max-height: 136px;
        margin-top: 8px;

    }
    .bottom_img img{
        width: 100%;
        height: 136px;
        max-height: 136px;
    }
</style>

</body>
</html>
